<template>
  <div class="albumview">
    <div class="albumpic" v-for="item in list" :key="item.album_id">
      <img src="@/assets/album.jpg" @click="picture(item)" :id="item.album_id" ref="sele" alt="" />
      <template>
        <i class="el-icon-delete" @click="deletealbum(item)" ref="del"></i>
      </template>

      <span>{{ item.album_name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    }
  },

  methods: {
    picture(item) {
      this.$router.push({name:"picturelink",params:{album_id:item.album_id}})
       console.log(item.album_id);
      //  this.list='';
       this.selectalbum()
    },

    async showalbum() {
      // 查询该用户的所有相册信息，然后渲染到界面
      const { data: res1 } = await this.$http.get("album/whoalbum")
      console.log(res1)
      this.list = res1.data
      console.log(this.list)
    },

    // 查询相册
    selectalbum(){
      console.log(this.list);
    },

    // 删除相册
    async deletealbum(item) {
      console.log("删除")
      console.log(item.album_id)
      const r = window.confirm("确定删除该相册？")
      if (r == true) {
        const { data: res } = await this.$http.post("album/deletealbum", {
          album_id: item.album_id,
        })
        console.log(res)
        //调用showdalbum()重新渲染页面
        this.showalbum();
      } else {
        return
      }
    },
  },

  created() {
    this.showalbum()
    console.log("aj")
  },

  props: {
    name: {
      type: String,
      require: true,
    },

    // id:{
    //   type:Number,
    //   require:true
    // }
  },
}
</script>

<style lang="less" scoped>
// 相册展示在界面上的样式
.albumpic {
  //  position: absolute;
  overflow: hidden;
  margin-left: 60px;
  margin-top: 60px;
  float: left;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.8);

  .el-icon-delete {
    margin-left: 5px;
    font-size: 25px;
    color: white;
  }

  span {
    margin-top: 5px;
    margin-left: 55px;
    color: white;
  }

  // 图片的样式
  img {
    //  transform: scale(1.1);
    //  background-color: blue;
    cursor: pointer;
    transition: all 0.4s;
    height: 160px;
    width: 100%;
  }

  img:hover {
    transform: scale(1.1);
  }
}
</style>
